<template>
	<wd-config-provider theme="dark">
		<wd-tabbar
			fixed
			:model-value="current"
			:bordered="false"
			safeAreaInsetBottom
			placeholder
			shape="round"
			activeColor="#FF3B1E"
			custom-class="tab-bar"
			@change="change"
			custom-style="bottom: calc(constant(safe-area-inset-bottom) + 20rpx);bottom: calc(env(safe-area-inset-bottom) + 20rpx);"
		>
			<wd-tabbar-item title="大厅" icon="a-precisemonitor" name="index"/>
			<wd-tabbar-item title="广场" icon="circle" name="plaza"/>
			<view class="publish">
				<image src="/static/icon/publish.png" class="p-img" />
			</view>
			<wd-tabbar-item title="一刻" icon="chart-bubble" name="records"/>
			<wd-tabbar-item title="我的" icon="user" name="mine"/>
		</wd-tabbar>
	</wd-config-provider>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	const props = defineProps(['current'])
	const change = (e) =>{
		const { value } = e
		uni.switchTab({ url: `/pages/${value}/${value}` })
	}
	onLoad(() =>{
		uni.hideTabBar()
	})
</script>

<style lang="scss" scoped>
	.publish {
		height: 50px;
		padding: 0 20rpx;
		.p-img {
			width: 100rpx;
			height: 100rpx;
			transform: translateY(-20%);
		}
	}
</style>